import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'
import { createConfig, http, cookieStorage, createStorage } from '@wagmi/vue'
import { defaultConnectors } from '@metaicons/web3-wallet-kit'
import { WagmiPlugin } from '@metaicons/web3-wallet-kit/plugin'
import {
  mainnet,
  mantle,
  mantleSepoliaTestnet,
  mantleTestnet,
  polygon,
  polygonAmoy,
  ronin,
  saigon,
  sepolia,
} from '@wagmi/vue/chains'

export default defineNuxtPlugin((nuxtApp) => {
  const config = createConfig({
    chains: [mainnet, sepolia, polygon, polygonAmoy, ronin, saigon, mantle, mantleTestnet, mantleSepoliaTestnet],
    transports: {
      [mainnet.id]: http(),
      [sepolia.id]: http(),
      [polygon.id]: http(),
      [polygonAmoy.id]: http(),
      [ronin.id]: http(),
      [saigon.id]: http(),
      [mantle.id]: http(),
      [mantleTestnet.id]: http(),
      [mantleSepoliaTestnet.id]: http(),
    },
    ssr: true,
    storage: createStorage({
      storage: cookieStorage,
    }),
    connectors: defaultConnectors,
  })

  const queryClient = new QueryClient()

  nuxtApp.vueApp.use(WagmiPlugin, { config }).use(VueQueryPlugin, {queryClient})
  nuxtApp.provide('wagmiConfig', config)
})
